<template>
	<view class="date-wrap px24py30">
		<view class="flex justify-between align-center">
			<view class="flex">
				<view @tap="changeTab(0)" class="btn-base" :class="[index==0?'active':'']">当天</view>
				<view @tap="changeTab(1)" class="btn-base ml-3" :class="[index==1?'active':'']"> 选择其他日期 </view>
			</view>
			<view class="select" v-if="index==0">
				{{selectDate}}
			</view>
			<view v-if="index==1">
				<uni-datetime-picker type="date" v-model="selectDate" @change='dateChange'>
					<view class="flex align-center select">
						<text>{{selectDate||'选择日期'}}</text>
						<u-icon  class="ml-1" color="#bebebe" size="10" :name="show?'arrow-up-fill':'arrow-down-fill'"></u-icon>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bg-date",
		data() {
			return {
				show:false,
				selectDate:'',
				index:-1
			};
		},
		methods:{
			changeTab(idx){
				this.index = idx;
				if(idx==0){
					let now = Date.now()
					this.selectDate=uni.$u.timeFormat(now, 'yyyy-mm-dd');
					this.$emit('date-change', this.selectDate + " 00:00:00")
				} else {
					this.selectDate = ''
				}
			},
			dateChange(e){
				this.$emit('date-change', e+" 00:00:00")
			}
		}
	}
</script>

<style>
.date-wrap {
	background-color: #FFFFFF;
}
.btn-base {
	padding: 10rpx 24rpx;
	background: #fafafa;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC-Medium;
	font-weight: 500;
	text-align: center;
	color: #86898c;
	box-sizing: border-box;
	border: 1rpx solid #fafafa;
}
.btn-base.active {
	background: #ffefe7;
	border: 1rpx solid #ee3636;
	color: #ee3636;
}
.select {
	padding: 8rpx;
}
</style>